<script setup lang='ts'>
import { ref, reactive,onMounted } from 'vue'
import RepairTable from './RepairTable.vue'
import setUpTime from '@/utils/setUpTime'
import {
  GetRelationRepairRecord,
  AddRelationRepairRecord,
  EditRelationRepairRecord,
  DeleteRelationRepairRecord
} from '@/api/publicApi'

const props = defineProps({
  deviceType: {
    type: Number,
    default: 110
  }
})

// refs
const repairTableRef = ref()
// 表格弹框
const dialogVisible = ref(false)
// 新增/编辑弹框
const innerVisible = ref(false)

const title = ref('添加信息')

// 密码信息
const formLabelAlign = reactive({
  userName: 'admin',
  currentPassword: ''
})
// 输入框规则
const rules = reactive({
  userName: [
    { required: true, message: '请输入用户名', trigger: 'blur' }
  ],
  currentPassword: [
    { required: true, message: '请输入当前密码', trigger: 'blur' }
  ],
  newPassword: [
    { required: true, message: '请输入新密码', trigger: 'blur' }
  ]
})

// 表单数据
const formData = reactive({
  id: '',
  describe: '',
  userName: 'admin',
  DeviceCode: '',
  deviceName: '',
  measurePointCode: '',
  HarborCode: '',
  barWheelMachineCode: '',
  CompanyCode: ''
})
const params = {
  HarborCode: '',
  CompanyCode: '',
  BarWheelMachineCode: '',
  DeviceCode: '',
  RelationDeviceType: 0, //设备类型编号
  Sorting: 'creationTime desc',
  SkipCount: 0,
  MaxResultCount: 0
}

// 表格数据
const tableData: any = ref([])

// 函数
onMounted(() => {
  console.log('设备类型---->', props.deviceType)
  
})

// 获取表格数据
const getRepairTableData = () => {
  //维修历史记录列表
  GetRelationRepairRecord({
    DeviceCode: formData.DeviceCode,
    RelationDeviceType: 110, //设备类型编号
    Sorting: 'creationTime desc',
    SkipCount: (repairTableRef.value.pageInfo.pageNum - 1) * repairTableRef.value.pageInfo.pageSize,
    MaxResultCount: repairTableRef.value.pageInfo.pageSize
  }).then(res => {
    tableData.value = []
    tableData.value = [ ...res.result.items ]
    tableData.value.forEach(item => {
      item.creationTime = setUpTime.formatTime(item.creationTime)
    })
    repairTableRef.value.pageInfo.total = res.result.totalCount
  })
}

// 新增记录
const addRepair = () => {
  title.value = '提交信息'
  innerVisible.value = true
  console.log('新增维修记录------------>')
}
// 编辑记录
const updateRepair = (row: any) => {
  title.value = '编辑信息'
  innerVisible.value = true
  formData.deviceName = row.deviceName
  formData.describe = row.describe
  console.log('编辑维修记录------------>', row)
}
// 确认新增/修改
const confirm = () => {
  if (title.value === '添加信息') {
    formData.barWheelMachineCode = localStorage.BarWheelMachineCode ? localStorage.BarWheelMachineCode : null
    // 保养
    AddRelationRepairRecord(formData).then(res => {
      if (res.success === true) {
        getRepairTableData()
        innerVisible.value = false
      }
    })
  } else {
    formData.barWheelMachineCode = localStorage.BarWheelMachineCode
    // 修改保养
    EditRelationRepairRecord({
      id: formData.id,
      describe: formData.describe
    }).then(res => {
      if (res.success === true) {
        // $message.success('修改成功')
        getRepairTableData()
        innerVisible.value = false
      }
    })
  }
}

// 向外暴露的函数与变量
defineExpose({
  dialogVisible
})
</script>

<template>
  <el-dialog
    v-model="dialogVisible"
    width="1536px"
  >
    <template #default>
      <div
        class="btn-box custom-button"
        @click="addRepair"
      >
        添加维修信息
      </div>
      <div class="table-box">
        <RepairTable
          ref="repairTableRef"
          :table-data="tableData"
          :get-repair-table-data="getRepairTableData"
          :update-repair="updateRepair"
        />
      </div>
      <el-dialog
        v-model="innerVisible"
        width="480"
        :title="title"
        append-to-body
      >
        <template #default>
          <div class="add-info-box">
            <el-form
              label-position="right"
              label-width="80px"
              :model="formData"
              :rules="rules"
            >
              <el-form-item
                label="设备名称"
                prop="userName"
              >
                <el-select
                  v-model="formData.userName"
                  class="add-info-select"
                >
                  <el-option />
                </el-select>
              </el-form-item>
              <el-form-item label="维修原因">
                <el-input v-model="formData.describe" />
              </el-form-item>
            </el-form>
          </div>
        </template>
        <template #footer>
          <el-button @click="innerVisible = false">
            取 消
          </el-button>
          <el-button type="primary">
            确 定
          </el-button>
        </template>
      </el-dialog>
    </template>
  </el-dialog>
</template>

<style scoped lang=scss>
.btn-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 40px;
  margin-bottom: 10px;
}

.add-info-box {
  width: 90%;
}
</style>
<style lang="scss">
.add-info-select {
  width: 100%;
}
</style>